<template>
  <div>
    <div class="header-top"
         :class="(tab === orderListItemType.payment && count.payment === 0)
             || (tab === orderListItemType.verification && count.verification === 0)
             || (tab === orderListItemType.shipment && count.shipment === 0)
             || (tab === orderListItemType.pickup && count.pickup === 0)
             || (tab === orderListItemType.shipped && count.shipped === 0)
             || (tab === orderListItemType.settlement && count.settlement === 0)
             || (tab === orderListItemType.completed && count.completed === 0) ? 'backcolor-color-grey' : 'backcolor-color-grey'">
      <div class="header">
        <div class="header-title subheading-heavy body-content">
          <div class="header-title-left">
            订单列表
          </div>
          <div class="header-title-right body-heavy" @click="$router.push('/order/add')">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 12H16" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 16V8" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            出单
          </div>
        </div>
      </div>
      <div class="order-category-list" :key="key.tab">
        <ul>
          <!-- 有余款 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.payment ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.payment)">
              <div class="order-category-img">
                <van-badge :content="count.payment === 0 ? '' : count.payment" >
                  <svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="3.16675" y="9.3335" width="22.6667" height="6.66667" :fill="tab === orderListItemType.payment ? '#FCD538': ''"/>
                    <path d="M3.16675 16.8135H25.8334" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M25.8334 13.7067V23.2401C25.7934 27.0401 24.7534 28.0001 20.7934 28.0001H8.20679C4.18012 28.0001 3.16675 27.0001 3.16675 23.0267V13.7067C3.16675 10.1067 4.00675 8.94673 7.16675 8.76007C7.48675 8.74673 7.83345 8.7334 8.20679 8.7334H20.7934C24.82 8.7334 25.8334 9.7334 25.8334 13.7067Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.8334 8.97333V18.2933C29.8334 21.8933 28.9934 23.0533 25.8334 23.24V13.7067C25.8334 9.73333 24.82 8.73333 20.7934 8.73333H8.20679C7.83345 8.73333 7.48675 8.74667 7.16675 8.76C7.20675 4.96 8.24679 4 12.2068 4H24.7934C28.82 4 29.8334 5 29.8334 8.97333Z" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.5 23.7466H9.79329" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12.6467 23.7466H17.2334" stroke="#242424" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">有余款</div>
            </div>
          </li>
          <!-- 待核款 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.verification ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.verification)">
              <div class="order-category-img">
                <van-badge :content="count.verification === 0 ? '' : count.verification" :key="key.badge.verification">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="24.6667" cy="24.6667" r="4.66667" :fill="tab === orderListItemType.verification ? '#FCD538' : ''"/>
                    <path d="M27.3334 15.0665V9.38652C27.3334 4.01318 26.0801 2.6665 21.0401 2.6665H10.9601C5.92008 2.6665 4.66675 4.01318 4.66675 9.38652V24.3998C4.66675 27.9465 6.61343 28.7865 8.97343 26.2532L8.98674 26.2398C10.0801 25.0798 11.7467 25.1732 12.6934 26.4398L14.0401 28.2398" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M24.2667 28.5333C26.6231 28.5333 28.5333 26.6231 28.5333 24.2667C28.5333 21.9103 26.6231 20 24.2667 20C21.9103 20 20 21.9103 20 24.2667C20 26.6231 21.9103 28.5333 24.2667 28.5333Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.3333 29.3333L28 28" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10.6667 9.3335H21.3334" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 14.6665H20" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">待核款</div>
            </div>
          </li>
          <!-- 待发货 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.shipment ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.shipment)">
              <div class="order-category-img">
                <van-badge :content="count.shipment === 0 ? '' : count.shipment">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16 17.3335L28 9.3335V22.6668L16 29.3335V17.3335Z" :fill="tab === orderListItemType.shipment ? '#FCD538' : ''"/>
                    <path d="M4.22656 9.91992L15.9999 16.7333L27.6932 9.95992" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 28.8135V16.7202" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M13.2401 3.30672L6.1201 7.25338C4.50677 8.14672 3.18677 10.3867 3.18677 12.2267V19.76C3.18677 21.6 4.50677 23.84 6.1201 24.7334L13.2401 28.6934C14.7601 29.5334 17.2534 29.5334 18.7734 28.6934L25.8934 24.7334C27.5068 23.84 28.8268 21.6 28.8268 19.76V12.2267C28.8268 10.3867 27.5068 8.14672 25.8934 7.25338L18.7734 3.29338C17.2401 2.45338 14.7601 2.45338 13.2401 3.30672Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">待发货</div>
            </div>
          </li>
          <!-- 待自提 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.pickup ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.pickup)">
              <div class="order-category-img">
                <van-badge :content="count.pickup === 0 ? '' : count.pickup">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.33325 9.33317C9.33325 5.65127 12.318 2.6665 15.9999 2.6665C19.6818 2.6665 22.6666 5.65127 22.6666 9.33317V10.6665H9.33325V9.33317Z"
                          :fill="tab === orderListItemType.pickup ? '#FCD538' : ''"/>
                    <path d="M10 10.2267V8.93334C10 5.93334 12.4133 2.98668 15.4133 2.70668C18.9867 2.36001 22 5.17334 22 8.68001V10.52" stroke="#737373" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 29.3332H20C25.36 29.3332 26.32 27.1865 26.6 24.5732L27.6 16.5732C27.96 13.3198 27.0267 10.6665 21.3333 10.6665H10.6667C4.97335 10.6665 4.04001 13.3198 4.40001 16.5732L5.40001 24.5732C5.68001 27.1865 6.64001 29.3332 12 29.3332Z" stroke="#737373" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M20.6606 16.0002H20.6725" stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M11.3261 16.0002H11.3381" stroke="#737373" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">待自提</div>
            </div>
          </li>
          <!-- 已发货 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.shipped ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.shipped)">
              <div class="order-category-img">
                <van-badge :content="count.shipped === 0 ? '' : count.shipped">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.66675 6.6665C2.66675 4.45736 4.45761 2.6665 6.66675 2.6665H20.0001V18.6665H2.66675V6.6665Z"
                          :fill="tab === orderListItemType.shipped ? '#FCD538' : ''"/>
                    <path d="M20.0001 2.6665V15.9998C20.0001 17.4665 18.8001 18.6665 17.3334 18.6665H2.66675V7.99984C2.66675 5.05317 5.05341 2.6665 8.00008 2.6665H20.0001Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.3334 18.6665V22.6665C29.3334 24.8798 27.5467 26.6665 25.3334 26.6665H24.0001C24.0001 25.1998 22.8001 23.9998 21.3334 23.9998C19.8667 23.9998 18.6667 25.1998 18.6667 26.6665H13.3334C13.3334 25.1998 12.1334 23.9998 10.6667 23.9998C9.20008 23.9998 8.00008 25.1998 8.00008 26.6665H6.66675C4.45341 26.6665 2.66675 24.8798 2.66675 22.6665V18.6665H17.3334C18.8001 18.6665 20.0001 17.4665 20.0001 15.9998V6.6665H22.4534C23.4134 6.6665 24.2934 7.18652 24.7734 8.01318L27.0534 11.9998H25.3334C24.6001 11.9998 24.0001 12.5998 24.0001 13.3332V17.3332C24.0001 18.0665 24.6001 18.6665 25.3334 18.6665H29.3334Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10.6667 29.3333C12.1394 29.3333 13.3333 28.1394 13.3333 26.6667C13.3333 25.1939 12.1394 24 10.6667 24C9.19391 24 8 25.1939 8 26.6667C8 28.1394 9.19391 29.3333 10.6667 29.3333Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M21.3334 29.3333C22.8062 29.3333 24.0001 28.1394 24.0001 26.6667C24.0001 25.1939 22.8062 24 21.3334 24C19.8607 24 18.6667 25.1939 18.6667 26.6667C18.6667 28.1394 19.8607 29.3333 21.3334 29.3333Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.3333 16V18.6667H25.3333C24.6 18.6667 24 18.0667 24 17.3333V13.3333C24 12.6 24.6 12 25.3333 12H27.0533L29.3333 16Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">已发货</div>
            </div>
          </li>
          <!-- 寄卖待结 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.settlement ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.settlement)">
              <div class="order-category-img">
                <van-badge :content="count.settlement === 0 ? '' : count.settlement">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle cx="12" cy="21.3335" r="8" :fill="tab === orderListItemType.settlement ? '#FCD538' : ''"/>
                    <path d="M12.6667 18.3331C12.6667 19.6265 13.6668 20.6665 14.8934 20.6665H17.4001C18.4667 20.6665 19.3334 19.7598 19.3334 18.6265C19.3334 17.4132 18.8001 16.9732 18.0134 16.6932L14.0001 15.2932C13.2134 15.0132 12.6801 14.5865 12.6801 13.3598C12.6801 12.2398 13.5467 11.3198 14.6134 11.3198H17.1201C18.3467 11.3198 19.3468 12.3598 19.3468 13.6532" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 10V22" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.3334 15.9998C29.3334 23.3598 23.3601 29.3332 16.0001 29.3332C8.64008 29.3332 2.66675 23.3598 2.66675 15.9998C2.66675 8.63984 8.64008 2.6665 16.0001 2.6665" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M29.3333 7.99984V2.6665H24" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M22.6667 9.33317L29.3334 2.6665" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">寄卖待结</div>
            </div>
          </li>
          <!-- 已完成 -->
          <li class="order-category-li">
            <div class="order-category"
                 :class="tab === orderListItemType.completed ? 'order-nav-active': '' "
                 @click="tabCLick(orderListItemType.completed)">
              <div class="order-category-img">
                <van-badge content="">
                  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.6667 9.3335C10.6667 7.12436 12.4576 5.3335 14.6667 5.3335H22.6667C24.8759 5.3335 26.6667 7.12436 26.6667 9.3335V17.3335C26.6667 19.5426 24.8759 21.3335 22.6667 21.3335H14.6667C12.4576 21.3335 10.6667 19.5426 10.6667 17.3335V9.3335Z"
                          :fill="tab === orderListItemType.completed ? '#FCD538' : ''"/>
                    <path d="M12.0001 29.3332H20.0001C26.6667 29.3332 29.3334 26.6665 29.3334 19.9998V11.9998C29.3334 5.33317 26.6667 2.6665 20.0001 2.6665H12.0001C5.33341 2.6665 2.66675 5.33317 2.66675 11.9998V19.9998C2.66675 26.6665 5.33341 29.3332 12.0001 29.3332Z" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10.3333 15.9999L14.1066 19.7732L21.6666 12.2266" stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </van-badge>
              </div>
              <div class="order-category-text paragraph-p3-light">已完成</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="margin-top-div-230 order-main-list-div">
      <div v-if="tab === orderListItemType.payment">
        <main-empty v-if="count.payment === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.payment"
        ></main-empty>
        <item-list v-if="count.payment > 0"
                   :key="key.payment"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.payment"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.verification">
        <main-empty v-if="count.verification === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.verification"
        ></main-empty>
        <item-list v-if="count.verification > 0"
                   :key="key.verification"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.verification"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.shipment">
        <main-empty v-if="count.shipment === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.shipment"
        ></main-empty>
        <item-list v-if="count.shipment > 0"
                   :key="key.shipment"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.shipment"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.pickup">
        <main-empty v-if="count.pickup === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.pickup"
        ></main-empty>
        <item-list v-if="count.pickup > 0"
                   :key="key.pickup"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.pickup"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.shipped">
        <main-empty v-if="count.shipped === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.shipped"
        ></main-empty>
        <item-list v-if="count.shipped > 0"
                   :key="key.shipped"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.shipped"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.settlement">
        <main-empty v-if="count.settlement === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.settlement"
        ></main-empty>
        <item-list v-if="count.settlement > 0"
                   :key="key.settlement"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.settlement"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
      <div v-if="tab === orderListItemType.completed">
        <main-empty v-if="count.completed === 0"
                    class="margin-top-div-56"
                    :list-code="orderListTypeCode"
                    :list-item-code="orderListItemType.completed"
        ></main-empty>
        <item-list v-if="count.completed > 0"
                   :key="key.completed"
                   :list-code="orderListTypeCode"
                   :list-item-code="orderListItemType.completed"
                   v-on:itemNumRefreshEvent = "orderListNumInit"
        ></item-list>
      </div>
    </div>
  </div>
</template>

<script>
import MainEmpty from "@/components/MainEmpty"
import ItemList from "@/components/ItemList";
import { getOrderStatusCount } from "@/request/api";
import {Badge, Toast} from "vant";

export default {
  name: "OrderViewMain",
  components: {
    [Badge.name]: Badge,
    ItemList,
    MainEmpty,
  },
  props: {
  },
  data() {
    return {
      tab: this.$route.query.tab ? Number(this.$route.query.tab) : this.GLOBAL.listItemType.order.payment,
      orderListTypeCode: this.GLOBAL.listType.order,
      orderListItemType: this.GLOBAL.listItemType.order,
      count: {
        payment: 0,
        verification: 0,
        shipment: 0,
        pickup: 0,
        shipped: 0,
        settlement: 0,
        completed: 0,
      },
      key: {
        tab: new Date().getTime(),
        payment: new Date().getTime(),
        verification: new Date().getTime(),
        shipment: new Date().getTime(),
        pickup: new Date().getTime(),
        shipped: new Date().getTime(),
        settlement: new Date().getTime(),
        completed: new Date().getTime(),
        badge: {
          verification: new Date().getTime(),
        },
      },
    };
  },
  mounted() {
    const queryTab = this.$route.query.tab
    this.tab = queryTab ? Number(queryTab) : this.GLOBAL.listItemType.report.stock
    this.orderListNumInit()
  },
  methods: {
    tabCLick(tab) {
      this.tab = tab
      this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=' + tab)
      switch (tab) {
        case this.orderListItemType.payment:
          this.key.payment = new Date().getTime()
          break
        case this.orderListItemType.verification:
          this.key.verification = new Date().getTime()
          break
        case this.orderListItemType.shipment:
          this.key.shipment = new Date().getTime()
          break
        case this.orderListItemType.pickup:
          this.key.pickup = new Date().getTime()
          break
        case this.orderListItemType.shipped:
          this.key.shipped = new Date().getTime()
          break
        case this.orderListItemType.settlement:
          this.key.settlement = new Date().getTime()
          break
        case this.orderListItemType.completed:
          this.key.completed = new Date().getTime()
          break
      }
      this.orderListNumInit()
    },
    orderListNumInit() {
      getOrderStatusCount().then(res => {
        const {State, Msg, Data} = res
        if (State) {
          for (let i = 0; i < Data.length; i++) {
            const {name, count} = Data[i]
            switch (name) {
              case '有余款':
                this.count.payment = count
                break;
              case '待核款':
                this.count.verification = count
                this.key.badge.verification = new Date().getTime()
                break;
              case '待发货':
                this.count.shipment = count
                break;
              case '待自提':
                this.count.pickup = count
                break;
              case '已发货':
                this.count.shipped = count
                break;
              case '寄卖待结':
                this.count.settlement = count
                break;
              case '已完成':
                this.count.completed = count
                break;
            }
          }
          this.key.tab = new Date().getTime()
        } else { Toast(Msg) }
      })
    },
    onSwiperRight() {
      this.$router.go(-1)
    }
  },
};
</script>
<style scoped>
.header-top {
  width: 100%;
  height: 230px;
  position: fixed;
  top: 0;
  z-index: 3;
}
.header {
  height: 216px;
  background: #fcd538;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.header-title {
  padding-top: 52px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.header-title-left {
  width: 263px;
}

.header-title-right {
  width: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-category-list {
  height: 140px;
  width: 351px;
  border-radius: 16px;
  background-color: #FFF;
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.06);
  margin: -124px 12px auto 12px;
}

.order-category-li {
  display: inline;
  margin-right: 12px;
  padding-top: 12px;
  float: left;
  list-style: none;
}

.order-category {
  height: 52px;
  width: 50px;
  margin-left: 24px;
}

.order-category-img {
  padding-left: 9px;
}

.order-category-text {
  text-align: center;
}

.order-main-list-div {
  background-color: #E5E5E5;
  height: 520px;
}

</style>